<template>
  <div class="list-container">
    <div class='topbar clearfix'>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/mobile/bannerList'}">移动端管理</el-breadcrumb-item>
        <el-breadcrumb-item>首页楼层配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--<div class="header">-->
    <div>
      <el-row class="floor">
        <div class="borderLeft"></div>
        <div class="floorShow"  v-show="!onEditFloorHot">
          <el-row class="navList clearfloat">
            <el-col :span="21"><div class="floorShowTitle">{{floorHotform.title}}</div></el-col>
            <el-col :span="3" >
              <el-button style="float:right;background:#fff;color:#FC612A;border:none;" @click="showEditHot()" type="primary" icon="el-icon-edit" circle></el-button>
              <span style="float:right;color: #777777;font-size: 14px;line-height:40px;margin-right:20px;cursor:pointer;" @click="showEditHot()">编辑</span>
            </el-col>
          </el-row>
          <el-row class="floorShowsubtitle">
            {{floorHotform.subtitle}}
          </el-row>
        </div>

        <div class="floorEdit" v-show="onEditFloorHot">
          <el-form ref="floorHotform" :model="floorHotform" label-width="95px">
            <img src="../../assets/img/biaoti.png" style="float:left;margin-top:12px;" />
            <el-form-item label="楼层标题" class="titleFont" :required="true">
              <el-input v-model="floorHotform.title" ref="floorHotformTitle" placeholder="必填项，最多6个字" @blur="changeTitle" aria-placeholder="热门" style="width: 740px"></el-input>
              <div class="uploadFontFont">
                      <div class="xing">*</div>
                  </div>
            </el-form-item>
            <img src="../../assets/img/xiangmu.png" style="float:left;margin-top:12px;" />
            <el-form-item label="楼层副标题" class="titleFont" :required="true">
              <el-input v-model="floorHotform.subtitle" placeholder="选填项，最多10个字" ref="floorHotformSubtitle" @blur="changeSubtitle" aria-placeholder="大家都在去的好地方" style="width: 740px"></el-input>
            </el-form-item>
            <img src="../../assets/img/louceng.png" style="float:left;margin-top:12px;margin-right:5px;" />
            <el-form-item label="楼层模板" class="titleFont">
              <div>
                <div class="projectBlock clearfloat">
                  项目A
                </div>
                <div class="projectBlock clearfloat">
                  项目B
                </div>
                <div class="projectBlock clearfloat">
                  项目C
                </div>
                <div class="projectBlock clearfloat">
                  项目D
                </div>
              </div>
            </el-form-item>
            <el-form-item class="childFormItem" label="项目A">
              <el-select v-model="projectAId" placeholder="请选择项目"  filterable popper-class="projectNameSelect" style="width: 740px;">
                <el-option v-for="(project,index) in projectList" :label="project.name" :value="project.id" :key=index></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="childFormItem" label="项目B">
              <el-select v-model="projectBId" placeholder="请选择项目"  filterable popper-class="projectNameSelect" style="width: 740px;">
                <el-option v-for="project in projectList" :label="project.name" :value="project.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="childFormItem" label="项目C">
              <el-select v-model="projectCId" placeholder="请选择项目"  filterable popper-class="projectNameSelect" style="width: 740px;">
                <el-option v-for="project in projectList" :label="project.name" :value="project.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="childFormItem" label="项目D">
              <el-select v-model="projectDId" placeholder="请选择项目"  filterable popper-class="projectNameSelect" style="width: 740px;">
                <el-option v-for="project in projectList" :label="project.name" :value="project.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="sumitBtn">
              <el-button type="primary" @click="hotOnSubmit">保存</el-button>
              <el-button @click="onEditFloorHot = false">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-row>

      <el-row class="floor">
        <div class="borderLeft"></div>
        <div class="floorShow"  v-show="!onEditFloorBoutique">
          <el-row class="navList clearfloat">
            <el-col :span="21"><div class="floorShowTitle">{{floorBoutiqueform.title}}</div></el-col>
            <el-col :span="3">
              
              <el-button style="float:right;background:#fff;color:#FC612A;border:none;" @click="onEditFloorBoutique=true" type="primary" icon="el-icon-edit" circle></el-button>
              <span style="float:right;color: #777777;font-size: 14px;line-height:40px;margin-right:20px;cursor:pointer;" @click="onEditFloorBoutique=true">编辑</span>
            </el-col>
          </el-row>
          <el-row class="navList clearfloat">
            <el-col :span="2" v-for="merchKind in floorBoutiqueform.merchKinds" class="boutiqueBlock">{{merchKind.name}}</el-col>
          </el-row>
        </div>

        <div class="floorEdit" v-show="onEditFloorBoutique">
          <el-form ref="floorBoutiqueform" :model="floorBoutiqueform" label-width="95px">
            <img src="../../assets/img/biaoti.png" style="float:left;margin-top:12px;" />
            <el-form-item label="楼层标题" class="titleFont" :required="true">
              <el-input v-model="floorBoutiqueform.title" placeholder="必填项，最多6个字" ref="floorBoutiqueformTitle" @blur="changeTitle2" aria-placeholder="大家都在去的好地方" style="width: 740px"></el-input>
              <div class="uploadFontFont">
                      <div class="xing">*</div>
                  </div>
            </el-form-item>
            <img src="../../assets/img/xiangmu.png" style="float:left;margin-top:12px;" />
            <el-form-item label="楼层副标题" class="titleFont" :required="true">
              <el-input v-model="floorBoutiqueform.subtitle" placeholder="选填项，最多10个字" ref="floorBoutiqueformSubtitle" @blur="changeSubtitle2" aria-placeholder="大家都在去的好地方" style="width: 740px"></el-input>
            </el-form-item>
            <img src="../../assets/img/louceng.png" style="float:left;margin-top:12px;margin-right:5px;" />
            <el-form-item label="楼层模板2" class="titleFont">
              <div class="boutiquePreview">
                <el-tabs v-model="previewTemplate" class="active" style="float: left">
                  <el-tab-pane label="分类A" name="kindA"></el-tab-pane>
                  <el-tab-pane label="分类B" name="kindB"></el-tab-pane>
                  <el-tab-pane label="分类C" name="kindC"></el-tab-pane>
                  <el-tab-pane label="分类D" name="kindD"></el-tab-pane>
                  <el-tab-pane label="分类E" name="kindE"></el-tab-pane>
                  <el-tab-pane label="分类F" name="kindF"></el-tab-pane>
                  <el-tab-pane label="分类G" name="kindG"></el-tab-pane>
                </el-tabs>
                <div class="merchBlockContainer">
                  <div class="merchBlock">商品1</div>
                  <div class="merchLongBlock"></div>
                  <div class="merchLongBlock"></div>
                </div>
                <div class="merchBlockContainer">
                  <div class="merchBlock">商品2</div>
                  <div class="merchLongBlock"></div>
                  <div class="merchLongBlock"></div>
                </div>
                <div class="merchBlockContainer">
                  <div class="merchBlock">商品3</div>
                  <div class="merchLongBlock"></div>
                  <div class="merchLongBlock"></div>
                </div>
              </div>

              <!-- 精选编辑区域 -->
              <el-tabs v-model="activeKind" class="active" @tab-click="handleClick" style="float: left">
                <el-tab-pane v-for="(merchKind, kindex) in floorBoutiqueform.merchKinds" :label="'分类' + (kindex+1)" :name="'kind'+ (kindex+1)" :key=kindex>
                  <div class="kindTitle"> 
                    <el-form-item label="名称">
                      <el-input v-model="merchKind.name" aria-placeholder="" style="width: 390px"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-top: 10px;" v-for="(mk, mkindex) in merchKindGroup[kindex]" :label="'商品' + mkindex" class="merchSelector" :key=mkindex>
                        <el-select :remote-method="searchMerch" remote v-model="merchKindGroupName[kindex][mkindex]" @change="changeName(mk,kindex,mkindex)" placeholder="请输入商品名称" filterable popper-class="projectNameSelect" style="width: 390px;">
                          <el-option v-for="(merch) in merchSearchList" :label="merch.title" :value="merch.id+''" :key="merch.id"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <div style="float: left;margin-left:50px;margin-right:20px;margin-top:30px;" @click="deleteMerch(kindex)">
                      <el-button type="danger" icon="el-icon-delete" circle></el-button>
                    </div>
                    <div class="addWord" style="margin-top:30px;"  @click="addMerch(kindex);">
                      <img src="../../assets/img/addDom.png" style="float:left;margin-right:5px;cursor:pointer;margin-top:10px;" />
                      <span>继续添加商品</span>
                    </div>
                  </div>
                </el-tab-pane>
                <!--<el-tab-pane label="分类B" name="2">配置管理</el-tab-pane>-->
                <!--<el-tab-pane label="分类C" name="3">角色管理</el-tab-pane>-->
                <!--<el-tab-pane label="分类D" name="4">定时任务补偿</el-tab-pane>-->
                <!--<el-tab-pane label="分类E" name="5">定时任务补偿</el-tab-pane>-->
                <!--<el-tab-pane label="分类F" name="6">定时任务补偿</el-tab-pane>-->
                <!--<el-tab-pane label="分类G" name="7">定时任务补偿</el-tab-pane>-->
              </el-tabs>
            </el-form-item>

            <el-form-item class="sumitBtn">
              <el-button type="primary" @click="boutiqueOnSubmit">保存</el-button>
              <el-button @click="onEditFloorBoutique = false">取消</el-button>
            </el-form-item>

          </el-form>
        </div>
      </el-row>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="300px"
      :before-close="handleClose">
      <span>{{dialogContent}}</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureBtn()">确 定</el-button>
        </span>
    </el-dialog>
    
    <el-dialog
      title="是否确认保存"
      :visible.sync="dialogVisibleSumit"
      width="300px"
      :before-close="handleClose">
      <span>保存楼层内容后，将同步更新移动端首页的内容</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleSumit = false">取 消</el-button>
          <el-button type="primary" @click="sureBtnSumit(indexFlag)">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import api from "@/fetch/url";
  import {FormatDate,transformPrice} from '@/utils/index.js'
  export default {
    data() {
      return {
        indexFlag:1,
        dialogVisibleSumit:false,
        // 临时存放选择的商品分类信息
        merchKindA:[],
        merchKindB:[],
        merchKindC:[],
        merchKindD:[],
        merchKindE:[],
        merchKindF:[],
        merchKindG:[],
        merchKindAName:[],
        merchKindBName:[],
        merchKindCName:[],
        merchKindDName:[],
        merchKindEName:[],
        merchKindFName:[],
        merchKindGName:[],
        merchKindGroup:[this.merchKindA, this.merchKindB, this.merchKindC, this.merchKindD, this.merchKindE, this.merchKindF, this.merchKindG],
        merchKindGroupName:[this.merchKindAName, this.merchKindBName, this.merchKindCName, this.merchKindDName, this.merchKindEName, this.merchKindFName, this.merchKindGName],
        previewTemplate: 'kindA',
        activeKind: 'kind1',
        projectAId:null,
        projectBId:null,
        projectCId:null,
        projectDId:null,
        merchSearchParam:{
          keyWord:'',
          shelfStatus:1,
          pageNo:1,
          pageSize:20
        },
        merchSearchList: [],
        projectList : [{name: "项目1", id: 1}, {name: "项目2", id: 2}],
        // 1: 热门  2:精选
        typeEnums: [1, 2],
        dialogContent : "",
        dialogVisible : false,
        //是否正编辑热门楼层
        onEditFloorHot: false,
        //是否正编辑精选楼层
        onEditFloorBoutique: false,
        floorHotform: {
          id: 0,
          projects: [],
          projectAId: null,
          projectBId: null,
          projectCId: null,
          projectDId: null,
          projectIds: [],
          title: '',
          subtitle: '',
          type: 0,
          sort: 0
        },
        oldName:"",
        floorBoutiqueform: {
          id: 0,
          title: '',
          subtitle: '',
          merchKinds: [],
          type: 0,
          sort: 0
        }
      }
    },


    computed:{
      getTimeDate(){//获取时间戳
        return (time,format)=>{
          if(time){
            return FormatDate(new Date(Number(time)),format)
          }
        }
      },
    },
    mounted() {
      window.vue = this;
    },

    created() {
      api.getAllLayout().then(json => {
        if (json) {
          this.floorHotform = json[0];
          let tempArray = json[0].projects.map(p => p.id);
          this.floorHotform.projectIds = tempArray.concat(new Array(4 - tempArray.length));
          this.floorHotform.projectIds.fill(0, this.floorHotform.projectIds.length, 4);
          this.projectAId = this.floorHotform.projectIds[0];
          this.projectBId = this.floorHotform.projectIds[1];
          this.projectCId = this.floorHotform.projectIds[2];
          this.projectDId = this.floorHotform.projectIds[3];

          this.floorBoutiqueform = json[1];
          console.log(this.floorBoutiqueform.merchKinds,88888);

          this.merchKindA = this.floorBoutiqueform.merchKinds[0].merches!=null?this.floorBoutiqueform.merchKinds[0].merches.map(mk => ''+ mk.id+""):[];
          this.merchKindB = this.floorBoutiqueform.merchKinds[1].merches!=null?this.floorBoutiqueform.merchKinds[1].merches.map(mk => ''+ mk.id+""):[];
          this.merchKindC = this.floorBoutiqueform.merchKinds[2].merches!=null?this.floorBoutiqueform.merchKinds[2].merches.map(mk => ''+ mk.id+""):[];
          this.merchKindD = this.floorBoutiqueform.merchKinds[3].merches!=null?this.floorBoutiqueform.merchKinds[3].merches.map(mk => ''+ mk.id+""):[];
          this.merchKindE = this.floorBoutiqueform.merchKinds[4].merches!=null?this.floorBoutiqueform.merchKinds[4].merches.map(mk => ''+ mk.id+""):[];
          this.merchKindF = this.floorBoutiqueform.merchKinds[5].merches!=null?this.floorBoutiqueform.merchKinds[5].merches.map(mk => ''+ mk.id+""):[];
          this.merchKindG = this.floorBoutiqueform.merchKinds[6].merches!=null?this.floorBoutiqueform.merchKinds[6].merches.map(mk => ''+ mk.id+""):[];
          this.merchKindAName = this.floorBoutiqueform.merchKinds[0].merches!=null?this.floorBoutiqueform.merchKinds[0].merches.map(mk => ''+ mk.title):[];
          this.merchKindBName = this.floorBoutiqueform.merchKinds[1].merches!=null?this.floorBoutiqueform.merchKinds[1].merches.map(mk => ''+ mk.title):[];
          this.merchKindCName = this.floorBoutiqueform.merchKinds[2].merches!=null?this.floorBoutiqueform.merchKinds[2].merches.map(mk => ''+ mk.title):[];
          this.merchKindDName = this.floorBoutiqueform.merchKinds[3].merches!=null?this.floorBoutiqueform.merchKinds[3].merches.map(mk => ''+ mk.title):[];
          this.merchKindEName = this.floorBoutiqueform.merchKinds[4].merches!=null?this.floorBoutiqueform.merchKinds[4].merches.map(mk => ''+ mk.title):[];
          this.merchKindFName = this.floorBoutiqueform.merchKinds[5].merches!=null?this.floorBoutiqueform.merchKinds[5].merches.map(mk => ''+ mk.title):[];
          this.merchKindGName = this.floorBoutiqueform.merchKinds[6].merches!=null?this.floorBoutiqueform.merchKinds[6].merches.map(mk => ''+ mk.title):[];
          // title
          this.merchKindGroup = [this.merchKindA, this.merchKindB, this.merchKindC, this.merchKindD, this.merchKindE, this.merchKindF, this.merchKindG];
          this.merchKindGroupName = [this.merchKindAName, this.merchKindBName, this.merchKindCName, this.merchKindDName, this.merchKindEName, this.merchKindFName, this.merchKindGName];


          api.goodsPage(this.merchSearchParam).then(json => {
            this.merchSearchList = json.list;
            // console.log(this.merchSearchList,9999999999)
          })
        }
      });

      api.findByOperStatus({
        operStatus:"1",
        pageNo:1,
        pageSize:10000,
      },{
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(json => {
          if(json) {
            this.projectList = json.list;
          }
        })
        
    },
    methods: {
      //保存弹框中的确定按钮
      sureBtnSumit(index){
        this.dialogVisibleSumit=false;
        switch(index){
          case 1:  //楼层1
             console.log('submit!');
              this.floorHotform.projectIds[0] = this.projectAId;
              this.floorHotform.projectIds[1] = this.projectBId;
              this.floorHotform.projectIds[2] = this.projectCId;
              this.floorHotform.projectIds[3] = this.projectDId;

              api.editLayout(this.floorHotform).then(json => {
                this.$message({
                  message: "编辑楼层成功",
                  type: "success",
                });
                setTimeout(()=>{
                  this.onEditFloorHot = false;
                },1000)
              });
            break;
          case 2://楼层2
             console.log('submit!');
            let sub = this.floorBoutiqueform;
            for (let i=0; i<this.merchKindGroup.length; i++) {
              if (sub.merchKinds[i]) {
                sub.merchKinds[i].kindId = sub.merchKinds[i].id;
                sub.merchKinds[i].kindName = sub.merchKinds[i].name;
                sub.merchKinds[i].merchIds = this.merchKindGroup[i];
              }
            }

            // sub.merchKinds.forEach(mk => {
            //   mk.kindId = mk.kindId;
            //   mk.kindName = mk.name;
            //   mk.merchIds = this.merchKindA;
            // })
            console.log('提交精选表单:', sub);
            api.editLayout(this.floorBoutiqueform).then(json => {
              this.$message({
                message: "编辑楼层成功",
                type: "success",
              });
              setTimeout(()=>{
                this.onEditFloorBoutique = false;
              },1000)
            });
            break;
        }
          
         
      },
      //楼层副标题
      changeSubtitle(){
          // console.log(this.floorHotform.subtitle,2222222222);
          if(this.floorHotform.subtitle!=""&&this.floorHotform.subtitle.length>10){
              this.$message({
              message: "楼层1副标题最多10个字",
              type: "error",
            });
            this.$refs.floorHotformSubtitle.focus();
            return false;
          }
      },
      //楼层2副标题
      changeSubtitle2(){
          // console.log(this.floorHotform.subtitle,2222222222);
          if(this.floorBoutiqueform.subtitle!=""&&this.floorBoutiqueform.subtitle.length>10){
              this.$message({
              message: "楼层2副标题最多10个字",
              type: "error",
            });
            this.$refs.floorBoutiqueformSubtitle.focus();
            return false;
          }
      },
      //楼层标题最多6个字
      changeTitle(){
        if(this.floorHotform.title!=""&&this.floorHotform.title.length>6){
           this.$message({
            message: "楼层1标题最多6个字",
            type: "error",
          });
          this.$refs.floorHotformTitle.focus();
          return false;
        }
      },
      //floorBoutiqueformTitle
      //楼层2标题最多6个字
      changeTitle2(){
        if(this.floorBoutiqueform.title!=""&&this.floorBoutiqueform.title.length>6){
           this.$message({
            message: "楼层2标题最多6个字",
            type: "error",
          });
          this.$refs.floorBoutiqueformTitle.focus();
          return false;
        }
      },
      changeReset(index,index2){
           this.oldName=JSON.parse(JSON.stringify(this.merchKindGroupName[index][index2]));

      },
      changeOldReset(index,index2){
        if(this.merchKindGroupName[index][index2]==""){
            this.merchKindGroupName[index][index2]=this.oldName;
        }
      },
      changeName(item,index1,index2){
          this.merchKindGroup[index1][index2]=JSON.parse(JSON.stringify(this.merchKindGroupName[index1][index2]));
          // console.log(this.floorBoutiqueform.merchKinds[index1].merches,index1,6666666666666);
          // console.log(this.merchSearchList,777777777);
          for(let i in this.merchSearchList){
             if(this.merchKindGroup[index1][index2]==this.merchSearchList[i].id){
                  this.merchKindGroupName[index1][index2]=this.merchSearchList[i].title;
             }
          }
          // console.log(this.merchKindGroupName[index1],6666666666666);
      },
      addMerch(merchKindGroupIndex) {
        // console.log(this.merchSearchParam,777777777);
        api.goodsPage(this.merchSearchParam).then(json => {
            this.merchSearchList = json.list;
          })
        // console.log(this.merchSearchList,888888);
        this.merchKindGroup[merchKindGroupIndex].push('');
      },

      deleteMerch(merchKindGroupIndex) {
        this.merchKindGroup[merchKindGroupIndex].pop();
      },

      searchMerch(query) {
        if (query !== '') {
          this.merchSearchParam.keyWord = query;
          api.goodsPage(this.merchSearchParam).then(json => {
            this.merchSearchList = json.list;
          })
        } else {
          this.merchSearchParam.keyWord = '';
        }
      },

      handleClick(tab, event) {
        console.log(tab, event);
      },

      handleClose(){
        this.dialogVisible = false;
      },

      //编辑楼层，显示编辑页面内容
      showEditHot() {
        this.onEditFloorHot = true;
      },

      toastMsg(msg,type){
        this.$message({
          message: msg,
          type: type
        });
      },
      sumitCheck2(){
        if(this.floorBoutiqueform.title==""){
           this.$message({
            message: "楼层标题不能为空",
            type: "error",
          });
          return false;
        }
        let merchKindAName=[...new Set(this.merchKindAName)];
        let merchKindBName=[...new Set(this.merchKindBName)];
        let merchKindCName=[...new Set(this.merchKindCName)];
        let merchKindDName=[...new Set(this.merchKindDName)];
        let merchKindEName=[...new Set(this.merchKindEName)];
        let merchKindFName=[...new Set(this.merchKindFName)];
        let merchKindGName=[...new Set(this.merchKindGName)];
        // console.log(merchKindAName,this.merchKindAName,9999999);
        if(merchKindAName.length!=this.merchKindAName.length){  //分类1重复了
               this.$message({
                message: this.floorBoutiqueform.merchKinds[0].name+"存在重复选项,请修改",
                type: "error",
              });
              return false;
        }
        if(merchKindBName.length!=this.merchKindBName.length){  //分类2重复了
            this.$message({
                message: this.floorBoutiqueform.merchKinds[1].name+"存在重复选项,请修改",
                type: "error",
              });
              return false;
        }
        if(merchKindCName.length!=this.merchKindCName.length){  //分类3重复了
              this.$message({
                message: this.floorBoutiqueform.merchKinds[2].name+"存在重复选项,请修改",
                type: "error",
              });
              return false;
        }
        if(merchKindDName.length!=this.merchKindDName.length){  //分类4重复了
             this.$message({
                message: this.floorBoutiqueform.merchKinds[3].name+"存在重复选项,请修改",
                type: "error",
              });
              return false;
        }
        if(merchKindEName.length!=this.merchKindEName.length){  //分类5重复了
               this.$message({
                message: this.floorBoutiqueform.merchKinds[4].name+"存在重复选项,请修改",
                type: "error",
              });
              return false;
        }
        if(merchKindFName.length!=this.merchKindFName.length){  //分类6重复了
               this.$message({
                message: this.floorBoutiqueform.merchKinds[5].name+"存在重复选项,请修改",
                type: "error",
              });
              return false;
        }
        if(merchKindGName.length!=this.merchKindGName.length){  //分类7重复了
               this.$message({
                message: this.floorBoutiqueform.merchKinds[6].name+"存在重复选项,请修改",
                type: "error",
              });
              return false;
        }

        // console.log(this.merchKindAName, this.merchKindBName, this.merchKindCName, this.merchKindDName, this.merchKindEName, this.merchKindFName, this.merchKindGName,88888888888);
      },
      boutiqueOnSubmit() {
         //提交时的校验
        if(this.sumitCheck2() ==false){
          return false;
        }
        this.indexFlag=2;
         this.dialogVisibleSumit=true;
      },
      sumitCheck(){
        if(this.floorHotform.title==""){
           this.$message({
            message: "楼层标题不能为空",
            type: "error",
          });
          return false;
        }
        console.log(this.projectAId,this.projectBId,this.projectCId,this.projectDId,888888);
        let data=[];
        data=[this.projectAId,this.projectBId,this.projectCId,this.projectDId];
        let data2=[...new Set(data)];
        // console.log(data,data2,88888);
        if(data.length!=data2.length){
           this.$message({
            message: "不可选择重复的项目",
            type: "error",
          });
          return false;
        }
      },
      hotOnSubmit() {
        
        //提交时的校验
        if(this.sumitCheck() ==false){
          return false;
        }
        this.indexFlag=1;
        this.dialogVisibleSumit=true;
       
      }
    }
  }
</script>
<style>
  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    background-color: #fff;
  }
  .el-dialog{
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
  }
  .projectNameSelect .el-select-dropdown__item {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .projectNameSelect  .el-select-dropdown__item.selected{
    color: #FC612A;
  }
  .el-tabs__active-bar{
    background: #FC612A;
  }
  .el-tabs__item {
    padding: 0 8px;
  }
  .el-tabs__item.is-active {
    color: #FC612A;
  }
  .el-form-item__label {
    font-weight: normal;
  }
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content:""
  }
  .sumitBtn .el-form-item__content{
    margin-left:360px !important;
  }
  .sumitBtn .el-button--primary, .sumitBtn .el-button--default {
    width:96px;
    height:36px;
  }
  .titleFont .el-form-item__label{
    text-align: left;
  }
</style>
<style lang="scss" scoped>
  .addWord{
    font-family: PingFangSC-Regular;margin-left: 60px;
    font-size: 14px;
    color: #FF6A00;
    letter-spacing: 0;
  }

  .merchBlockContainer {
    float: left;
    margin-bottom: 12px;
  }
  .active {
    margin-left: 15px;
    float: left;
  }
  .boutiquePreview {
    background: #FFFFFF;
    border-radius: 4px;
    border-radius: 4px;
    height: 305px;
    width: 398px;
    float: left;
  }
  .childFormItem {
    margin-left: 50px;
  }
  .sumitBtn {
    padding-top:30px;
    border-top:1px solid #D6D6D6;
  }
  .merchSelector {
    width: 120px;
  }
  .projectBlock {
      background: #FFFFFF;
      border: 1px solid #FF6A00;
      border-radius: 4px;
      border-radius: 4px;
      width: 120px;
      height: 88px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #FF6A00;
      letter-spacing: 0;
      text-align: center;
      line-height: 88px;
      float: left;
      margin-right: 10px;
    }
    .floor {
      // box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px, rgba(0, 0, 0, 0.04) 0px 0px 6px;
      padding: 20px;
      background: #F4F5F8;
      margin-bottom: 25px;
      position: relative;
      .borderLeft {
        width:3px;
        height:20px;
        background: #FC612A;
        position: absolute;
        left:0;
        top:20px;
      }
    }
    .floorShowTitle {
      font-family: PingFang-SC-Medium;
      font-size: 18px;
      color: #262626;
      letter-spacing: 0;
    }
    .floorShowsubtitle {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #A9A9A9;
      letter-spacing: 0;
    }
    .merchBlock {
      background: #F4F5F8;
      border-radius: 4px;
      border-radius: 4px;
      width: 101px;
      height: 74px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #262626;
      letter-spacing: 0;
      text-align: center;
      line-height: 74px;
      float: left;
      margin-right: 10px;
      margin-left: 18px;
    }
    .merchLongBlock {
      background: #F4F5F8;
      border-radius: 4px;
      border-radius: 4px;
      width: 230px;
      height: 18px;
      float: left;
      margin-right: 10px;
      margin-top: 12px;
      /*margin-left: 18px;*/
    }
    .boutiqueBlock {
      background: #FFFFFF;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #262626;
      letter-spacing: 0;
      text-align: center;
      width:88px;
      height:28px;
      line-height: 28px;
      margin-right: 20px;
    }
    .header {
      width: 100%;
      min-width:1180px;
      border-radius:4px;
      height: 44px;
      display: flow-root;
      padding-left: 0;
      .list{
        margin-top: 10px;
        padding-left: 10px;
      }
      .navList {
        box-sizing: border-box;
        height: 44px;
        padding-left: 10px;
        .h5,.input,.numberP {
          float: left;
        }
        .h5 {
          font-size: 14px;
          color: #262626;
          font-weight: normal;
          margin-right: 12px;
          height: 44px;
          line-height: 44px;
        }
        .dateShop {
          width:40%;
        }
        .numberShop {
          width:300px;
        }
        .uploadDetail {
          float: left;
          .upload {
            width:150px;
            height: 115px;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            text-align: center;
            line-height: 115px;
            color: #ccc;
            cursor: pointer;
          }
          p {
            margin-top:20px;
            color: #ccc;
            font-size:14px;
          }
        }
        .checkDetail {
          float: left;

          .checkListAll {
            margin-top:20px;
            span {
              float: left;
            }
            .checkList {
              float: left;
              margin-left:20px;
            }
          }
          .checkListAll:first-child{
            margin-top:12px;
          }
        }
      }
    }
    .nav {
      .top {
        padding:20px 0 0px 0;
        box-sizing: border-box;
        .addProject {
          float: left;
          width: 150px;
          height: 40px;
          color: #fff;
          text-align: center;
          background: #1890ff;
          cursor: pointer;
          border-radius: 4px;
          line-height: 40px;
        }
        span {
          float: left;
          margin-left:30px;
          line-height: 40px;
        }
      }
      .navList {
        padding:0;
        margin:0;
        li {
          border-bottom: 1px solid #E9E9E9;
          float: left;
          width:100%;
          background: #fff;
          min-width:1180px;
          cursor: pointer;
          margin-top: 0;
          .table {
            padding: 14px 16px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            // align-items: center;
            .tableDiv {
              float: left;
              margin-left:20px;
              .miueList {
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 14px;
                color: #fff;
              };
              .upIng{
                color: #FC612A
              }
              .closeStatus{
                color: #8C8C8D
              }
              .BeopenedStatus{
                color: #26A9FF;
              }
            }
            .HeaderImg {
              margin-left:0px;
              img{
                width: 120px;
                height: 86px;
                background: #ccc;

              }
            }
            .HeaderDetail {
              // width:calc(100% - 820px);
              .topList {
                h3 {
                  //  float: left;
                  max-width:calc(100% - 80px);
                  overflow:hidden;
                  white-space:nowrap;
                  text-overflow:ellipsis;
                  font-size: 14px;
                  color: #262626;
                  // margin: 0 auto;
                  // text-align: center;
                }
              }
              .fontDetail {
                // float: left;
                // width: calc(100% - 120px);
                // margin: 0 auto;
                // text-align: center;
                max-height:70px;
                text-overflow:ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:3;
                overflow: hidden;
                color: #777777;
                font-size:12px;
                margin-top:12px;
                line-height: 18px;
              }
            }
            .HeaderOrder{
              text-align: center;
            }

            .HeaderDate {
              position: relative;
              height: 40px;
              text-align: center;
              span{
                font-size: 12px;
                color: #262626;
              }
            }
            .HeaderHandle {
              text-align: center;
              .HandleList {
                width:100%;
                text-align: center;
                font-size: 12px;
                color: #26A9FF;
                cursor: pointer;
                margin-bottom:8px;
              }
              .HandleList:hover {
                opacity: 0.8;
              }
            }
          }
          .font {
            background: #F5F5F7;
            height: 32px;
            line-height: 32px;
            padding-left: 12px;
            p {
              float: left;
              box-sizing: border-box;
              font-size: 12px;
              color: #777777;
              margin-right:20px;
              .blue {
                color: #262626;
                cursor: pointer;
                &:hover{
                  opacity: 0.8;
                }
              }
              &:nth-of-type(2){
                float:right;
              }
              &:nth-of-type(3){
                float:right;
              }
            }
            .line{
              float: right;
              display: inline-block;
              width: 1px;
              height: 12px;
              background: #777;
              position: relative;
              top: 10px;
              left: -9px;
            }
          }
        }
        .nodata{
          width: 100%;
          height:200px;
          line-height: 200px;
          text-align:center;
        }
      }
      .pagination {
        margin-top:30px;
        text-align: center;
      }
      .tableHeader {
        padding:0 20px;
        box-sizing: border-box;
        margin:10px 0 0 0;
        min-width:1180px;
        border-bottom: 1px solid #E9E9E9;
        .tableLi {
          float: left;
          margin-right:20px;
          font-size: 12px;
          color: #777777;
          height: 32px;
          line-height: 32px;
          text-align: center;
        }
        .tableHeaderDetail {
          text-align: left;
        }
      }
      .tableHeaderImg ,.HeaderImg{
        width: 120px;
      }
      .tableHeaderDetail ,.HeaderDetail{
        width:calc(100% - 720px);
      }
      .tableHeaderOrder ,.HeaderOrder{
        width:100px;
      }
      .tableHeaderOrder{
        i{
          margin-left: 4px;
        }
      }
      .tableHeaderStatus,.HeaderStatus {
        width:100px;
      }
      .tableHeaderDate ,.HeaderDate{
        width: 150px;
      }
      .tableHeaderHandle,.HeaderHandle {
        width: 100px;
        text-align: center;
      }
    }
  .uploadFontFont {
    float: left;
    height:40px;
    position: relative;
    left:750px;
    p {
       font-size: 12px;
       color: #A9A9A9;
    }
    .xing {
      position: absolute;
      left:0;
      top:0;
      font-size: 16px;
      color: #F52D2D;
    }
  }
  </style>
